<template>
	<view>
		<view class="bl-file"><view class="bl-1">文件选择:</view></view>
		<view class="bl-file bl-file-image">
			<view v-for="(item, index) in this.files" class="bl-file-image-sub">
				<view class="image-x border-radius" @tap="DeleteImage(index)">X</view>
				<image class="bl-bl-file-2" :src="item"></image>
			</view>
			<view class="bl-bl-file-2 filec" @tap="UploadImage()">
				<view class="image-x"></view>
				<view class="bl-bl-file-2-1">+</view>
				<view class="bl-bl-file-2-2">添加文件</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return {
			files: [],
		}
	},
	methods: {
		UploadImage() {
			let _this = this;
			uni.chooseImage({
				success(e) {
					_this.files = _this.files.concat(e.tempFilePaths);
				}
			});
		},
		DeleteImage(e) {
			this.files.splice(e, 1);
		}
	}
};
</script>

<style lang="scss">
.bl-file {
	display: flex;
	justify-content: flex-start;
	/* align-items: center; */
	border-bottom: 1px solid #fff;
	width: 100%;
	margin-top: 35upx;
}
.bl-file-image {
	display: flex;
	flex-wrap: wrap;
}
.bl-bl-file-2 {
	margin: 5upx 10upx;
	/* display: inline-block; */
	width: 200upx;
	height: 200upx;
	border: 1px solid #eee;
	color: #bebebe;
	/* line-height: 200upx; */
	text-align: center;
	background: #f1f5f8;
}
.bl-bl-file-2-1 {
	font-size: 80upx;
	margin-top: 14upx;
}
.bl-bl-file-2-2 {
	font-size: 4upx;
}
.image-x {
	position: absolute;
	z-index: 100;
	width: 20px;
	height: 20px;
	margin-left: 170upx;
	margin-top: 6upx;
}
.border-radius {
	border-radius: 10px;
	border: #f1f5f8 solid 1px;
	text-align: center;
	color: #eeeeee;
}
.filec {
}
.bl-file-image-sub {
}
</style>
